<template>
  <div id="Feq">
    <section class="c-feq l-section">
      <h3 class="c-feq__title">{{ feqData.mistitle }}</h3>
      <div class="c-feq__member">
        <van-image fit="cover" class="c-feq__avatar" :src="avatar"/>
        <em>{{ feqData.name }}</em>
      </div>
      <p class="c-feq__content">{{ feqData.title }}</p>
      <footer class="feq-footer">
        <aside class="feq-footer__wrap">
          <div class="feq-footer__tag">{{ feqData.sortName }}</div>
          <span>{{ feqData.replyno }} 回答</span>
        </aside>
        <em>{{ feqData.createTime }}</em>
      </footer>
    </section>
    <section class="l-content ">
      <van-image class="l-content__pic" :key="i" :src="pic" v-for="(pic,i) in pictures"/>
    </section>
    <van-image @click="$pushRoute({path:'feq-form',query:{mistakeId:customId}})" class="a-feature active-able"
               :src="require('@/assets/img/bubble.png')"/>
    <vj-list style="margin-top: 10px" :load-more="loadMore.bind(this)">
      <template #default="{item:{mistitle,name,title,sortName,replyNo,createTime,id,replyno}}">
        <section @click="$pushRoute({path:'/support/feq',query:{customId:id}})" class="c-feq">
          <h3 class="c-feq__title">{{ mistitle }}</h3>
          <div class="c-feq__member">
            <van-image fit="cover" class="c-feq__avatar" :src="avatar"/>
            <em>{{ name }}</em>
          </div>
          <p class="c-feq__content">{{ title }}</p>
          <footer class="feq-footer">
            <aside class="feq-footer__wrap">
              <div class="feq-footer__tag">{{ sortName }}</div>
              <span>{{ replyno }} 回答</span>
            </aside>
            <em>{{ createTime }}</em>
          </footer>
        </section>
      </template>
    </vj-list>

  </div>
</template>
<script lang="ts">
import Vue, {ComponentOptions, VueConstructor} from "vue"
import Component from 'vue-class-component'
import {Prop} from "vue-property-decorator";
import {requestByGet, requestByPost} from "@/utils/request";
import {avatar} from '@/config/properties';
import VjList from "@/components/vj-list.vue";

export const meta = {authValid: true};
export const title = ""
@Component({
  components: {VjList}
})
export default class Feq extends Vue implements ComponentOptions<Vue> {
  name = "Feq"
  @Prop() customId!: string;
  feqData: any = {};

  async created() {
    this.feqData = await requestByGet(`/qqc/qqcMistake/queryById`, {id: this.customId});
  }

  get pictures() {
    let list = [];
    try {
      list = JSON.parse(this.feqData.remarks3) || []
    } catch (e) {

    }
    return list
  }

  async loadMore(pageNo, pageSize) {
    const {records} = await requestByGet(`/qqc/qqcMistake/yhList`, {pageNo, pageSize});
    return records;
  }
}
</script>

<style scoped lang="scss">
@import "~assets/common.scss";

#Feq {
.l-section{
  background: white;
}
  .c-feq {
    padding: 16px;
    &__title {
      font-size: 16px;
    }

    &__member {
      margin-top: 6px;
      @include alignCenter;
      font-size: 12px;
    }

    &__avatar {
      @include round(20px);
      margin-right: 6px;
    }

    &__content {
      color: $p-color;
      line-height: 1.3;
      margin: 5px 0;
    }

    .feq-footer {
      @include flex-between;
      font-size: 12px;

      &__wrap {
        @include alignCenter;
      }

      &__tag {
        padding: 3px;
        line-height: 1;
        border-radius: 2px;
        background: #f5f5f5;
        margin-right: 3px;
      }
    }
  }

  .l-content {
    position: relative;
    margin-top: 30px;
background: white;
    &__pic {
      width: 100%;
    }
  }

  .a-feature {
    position: fixed;
    bottom: 12px;
    right: 12px;
    height: 63px;
    width: 63px;
    z-index: 999;
  }
}
</style>
